<template>
  <view class="donations">
    <image
      class="donations-bg"
      src="https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/images/banner.png"
    ></image>

    <view class="donations-title">我要捐款</view>

    <view class="donations-money">
      <!-- <view class="money donations-activity">50元</view> -->
      <view
        v-for="item in moneyList"
        :key="item.value"
        :class="[select === item.value ? 'donations-activity' : '', 'money']"
        @click="selectMoney(item.value)"
      >
        {{ item.txt }}
      </view>
      <!-- <view class="money">200元</view> -->
    </view>
    <view class="donations-other">
      其他金额
      <input
        class="donations-input"
        :focus="focus"
        type="digit"
        :value="money"
        @click="inputMon"
        @input="inputChange"
      />
    </view>

    <view class="donations-btn" @click="pay">立即捐款</view>
    <view class="donations-tip">您的每一次捐助，都会为困境中的病友送去一份力量。</view>
  </view>
</template>

<script>
import { publicBenefitDonation } from '@/api/welfare';
import { memberId } from '@/common/baseUrl';

export default {
  data() {
    return {
      money: '',
      select: '', // 当前选中
      // moneyList: ['50元', '100元', '200元'],
      moneyList: [
        { value: 50, txt: '50元' },
        { value: 100, txt: '100元' },
        { value: 200, txt: '200元' }
      ],
      disabled: false,
      focus: false
    };
  },

  watch: {
    select: function (val) {
      if (val) {
        this.focus = false;
        // this.disabled = true;
        // this.money = '';
      } else {
        this.focus = true;
        // this.disabled = false;
      }
    }
  },

  methods: {
    // 选中金额
    selectMoney(i) {
      if (this.select === i) {
        this.select = '';
      } else {
        this.select = i;
      }
    },

    async pay() {
      let amount;
      amount = this.select ? this.select : this.money;

      let regs = /(^0*(\.0*)$)/;
      let regs1 = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/;
      if (amount === '' || amount === 0 || !regs1.test(amount) || regs.test(amount)) {
        uni.showToast({
          title: '请输入正确捐款金额',
          icon: 'none',
          duration: 2000
        });
        this.money = '';
        return;
      }

      const id = this.$store.state.join.patientid;
      const res = await publicBenefitDonation(id, {
        largeClass: 2, // 支付大类(固定值)
        groupId: 22, // 支付中类(固定值)
        paytypeId: 22, // 支付小类(固定值)
        amount: amount, // 金额
        memberId: memberId, // 如果微信支付传memberId
        openId: wx.getStorageSync('openid'), // 微信openId
        appId: wx.getStorageSync('appid') // 微信appId
      });
      if (res.code !== 0) {
        uni.showToast({
          title: res.message,
          icon: 'none',
          duration: 2000
        });
      } else {
        const doc = JSON.parse(res.data);
        let params = {
          appId: doc.appId,
          nonceStr: doc.nonceStr,
          package: doc.package, // 固定值，以微信支付文档为主
          timeStamp: doc.timeStamp,
          paySign: doc.paySign,
          signType: doc.signType // 根据签名算法生成签名
        };
        uni.requestPayment({
          provider: 'wxpay',
          ...params,
          success: function (win) {
            uni.showToast({
              title: '捐款成功',
              icon: 'none',
              duration: 2000
            });
            this.$wxPromise.navigateTo({
              url: '/pages/index/index'
            });
          },
          fail: function (err) {
            uni.showToast({
              title: '捐款失败',
              icon: 'none',
              duration: 2000
            });
          }
        });
      }
    },

    inputChange(e) {
      this.money = Number(e.detail.value);
    },

    inputMon() {
      this.select = '';
      this.focus = true;
    }
  }
};
</script>

<style lang="scss">
page {
  background: #ffffff;
}
.donations {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  &-bg {
    width: 100%;
    height: 920rpx;
  }
  &-title {
    font-size: 32rpx;
    font-weight: 500;
    color: #000000;
    text-align: center;
    margin: 104rpx 0 40rpx;
  }
  &-money {
    padding: 0 48rpx;
    display: flex;
    justify-content: space-between;
    .money {
      font-size: 28rpx;
      color: #c8161d;
      font-weight: 500;
      width: 200rpx;
      height: 64rpx;
      text-align: center;
      line-height: 64rpx;
      background: #f4f4f4;
      border-radius: 8rpx;
    }
  }
  &-other {
    padding: 0 48rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 32rpx 0;
    font-size: 28rpx;
    color: #000000;
  }
  &-input {
    flex: 1;
    background: #f4f4f4;
    margin-left: 18rpx;
    border-radius: 8rpx;
    padding: 10rpx 20rpx;
  }
  &-btn {
    margin: 100rpx 48rpx 40rpx;
    background: linear-gradient(236deg, #fe894d 0%, #ef3931 100%);
    border-radius: 44px;
    height: 88rpx;
    text-align: center;
    line-height: 88rpx;
    color: #ffffff;
    font-size: 36rpx;
  }
  &-tip {
    font-size: 28rpx;
    color: #9b9b9b;
    text-align: center;
    margin-bottom: 30rpx;
  }
  &-activity {
    background: #fe894d !important;
  }
}
</style>
